<template>
	<view class="whole">
		<view class="back">
			<image class="backimg" src="../../static/icon/backimg.png" mode="aspectFit"></image>
			<view class="backword">乐智出游</view>
		</view>
		<view class="All">
			<view class="club_data " style="margin: 20upx auto;height: 300upx;margin-top: 80upx;">
				<view class="club_data_l">
					<view class="club_data_l_b">
						<view class="word">
							<text class="data_num">15500</text>
							<text class="data_text">累计收益</text>
						</view>
						<!-- <view class="club_data_l_a"></view> -->
					</view>
					<!-- <view class="club_data_l_c"></view> -->
					<view class="club_data_l_b">
						<view class="word">
							<text class="data_num">33</text>
							<text class="data_text">已邀请</text>
						</view>
					</view>
				</view>
				<view class="club_data_l">
					<view class="club_data_l_b">
						<view class="word">
							<text class="data_num">12000</text>
							<text class="data_text">钱包余额</text>
						</view>
					</view>
					<!-- <view class="club_data_l_c"></view> -->
					<view class="club_data_l_b">
						<view class="word">
							<text class="data_num">12120</text>
							<text class="data_text">本月收入</text>
						</view>
					</view>
				</view>
			</view>
			<view class="mid">
				<view class="mid-button">
					<image class="img" src="../../static/icon/zu44.png" mode=""></image>
					<view class="mid-button-left" type="default">去邀请用户</view>
				</view>
				<view class="mid-button" @tap="send">
					<image class="img" src="../../static/icon/zu37.png" mode=""></image>
					<view class="mid-button-right" type="default">发传单</view>
				</view>
			</view>
			<view class="down">
				<!--tab导航栏-->
				<view class="uni-tab-bar">
					<scroll-view scroll-x >
						<view class="tap">
							<block v-for="(tabBar,index) in tabBars" :key="index">
								<view class="swiper-tab-list" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
									{{tabBar.name}}
									<view class="swiper-tab-line"></view>
								</view>
							</block>
						</view>

					</scroll-view>
				</view>

				<!--内容区-->
				<view class="uni-tab-bar">
					<swiper :current="tabIndex" @change="tabChange">
						<!-- 已邀请用户 -->
						<swiper-item v-for="(content,index) in userList" :key="index" v-if="isShow1">
							<view class="swiper-item">
								<view class="swiper-item-top">
									<view class="swiper-item-top-left">
										<image class="img1" src="../../static/icon/lizijun.png" mode=""></image>
										<view class="swiper-item-top-mid">
											<text>李子军</text>
											<text>13524569512</text>
										</view>
									</view>

									<view class="swiper-item-top-right">
										<image class="img2" src="../../static/icon/message.png" mode=""></image>
									</view>
								</view>
								<view class="swiper-item-down">
									<view class="swiper-item-down-left">
										<text class="down-word">邀请时间</text>
										<text>2020-2-21</text>
									</view>
									<view class="swiper-item-down-right">
										<text class="down-word">累计提成</text>
										<text>3223.70元</text>
									</view>
								</view>
							</view>
							<view class="line"></view>
						</swiper-item>
						<!-- 完成订单 -->
						<swiper-item v-for="(content,index) in orderList" :key="index" v-if="isShow2">
							<view class="swiper-item1">
								<view class="swiper-item-top">
									<view class="swiper-item-top-left1">
										<image class="img1" src="../../static/icon/lizixin.png" mode=""></image>
									</view>
									<view class="swiper-item-top-mid">
										<text>李子欣</text>
										<text>13524569512</text>
									</view>
								</view>
								<view class="swiper-item-down1">
									<view class="swiper-item-down-left1">
										<text class="down-word">邀请时间</text>
										<text>2020-2-21</text>
									</view>
									<view class="swiper-item-down-right1">
										<text class="down-word">累计提成</text>
										<text>3223.70元</text>
									</view>
								</view>
							</view>
							<view class="line"></view>
						</swiper-item>
						<!-- 提现进度 -->
						<swiper-item v-for="(content,index) in moneyList" :key="index" v-if="isShow3">
							<view class="money">
								<view class="head">
									<view class="text">
										<text>审核单号</text>
										<text>211252552152</text>
									</view>
									<view class="button check">
										审核中
									</view>
								</view>
								<view class="bottom">
									<view class="text">
										<text>发起时间</text>
										<text>2020-3-14</text>
									</view>
									<view class="text">
										<text>提现金额</text>
										<text>2112.2元</text>
									</view>
								</view>
							</view>
							<view class="line"></view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow1: true,
				isShow2: false,
				isShow3: false,
				tabIndex: 0, //选中标签栏的序列
				userList: [
					"已邀请用户",
					"已完成订单",
					"体现进度"
				],
				orderList: [
					"已邀请用户",
					"已完成订单",
					"体现进度"
				],
				moneyList: [
					"已邀请用户",
					"已完成订单",
					"体现进度"
				],
				tabBars: [{
						name: '已邀请用户',
						id: 'guanzhu'
					},
					{
						name: '已完成订单',
						id: 'tuijian'
					},
					{
						name: '提现进度',
						id: 'redian'
					}
				],
				swiperHeight: 0
			}
		},
		onLoad() {

		},
		computed:{
			btnClass(){
				
			}
		},
		methods: {
			toggleTab(index) {
				console.log(index)
				this.tabIndex = index
				if (this.tabIndex == 0) {
					this.isShow1 = true
					this.isShow2 = false
					this.isShow3 = false
					console.log(this.isShow1)
				} else if (this.tabIndex == 1) {
					this.isShow1 = false
					this.isShow2 = true
					this.isShow3 = false
				} else if (this.tabIndex == 2) {
					this.isShow1 = false
					this.isShow2 = false
					this.isShow3 = true
				}
			},
			//滑动切换swiper
			tabChange(e) {
				console.log(e.detail)
				const tabIndex = e.detail.current
				this.tabIndex = tabIndex
				if (this.tabIndex == 0) {
					this.isShow1 = true
					this.isShow2 = false
					this.isShow3 = false
					console.log(this.isShow1)
				} else if (this.tabIndex == 1) {
					this.isShow1 = false
					this.isShow2 = true
					this.isShow3 = false
				} else if (this.tabIndex == 2) {
					this.isShow1 = false
					this.isShow2 = false
					this.isShow3 = true
				}
			},
			send(){
				uni.navigateTo({
					url:"../sendLeaflet/sendLeaflet"
				});
			}
		}
	}
</script>

<style scoped>
	page{
		background:rgba(250,250,250,1);
		
	}
	.whole{
		width: 100%;
		height: 100vh;
		/* background: rgba(255, 255, 255, 1); */
		background:rgba(250,250,250,1);
	}
	.All {
		width: 100%;
		opacity: 1;
		padding: 30px 20px 0;
		position: absolute;
		top: 200rpx;
		/* background:rgba(250,250,250,1); */
	}

	.club_data {
		display: flex;
		width: 100%;
		height: 330rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 10rpx 20rpx rgba(103, 84, 152, 0.17);
		opacity: 1;
		border-radius: 24rpx;
	}

	.club_data_l {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.club_data_l_c {
		width: 100%;
		height: 2rpx;
		background-color: rgb(254, 153, 0);
	}

	.club_data_l_b {
		width: 50%;
		height: 50%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 25rpx;
		color: #999999;
		text-align: center;
	}

	.data_text {
		height: 33rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 600;
		line-height: 33rpx;
		color: rgba(51, 51, 51, 1);
		opacity: 1;
	}

	.data_num {
		height: 40rpx;
		font-size: 40rpx;
		font-family: DIN;
		font-weight: bold;
		line-height: 40rpx;
		color: rgba(245, 100, 64, 1);
		opacity: 1;
	}

	.club_data_c {
		margin: 0 !important;
		width: 35%;
		height: 87%;
		top: 6.5%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		/* 		border:  rgb(254,153,0) 2rpx solid; */
		border-radius: 50%;
		position: relative;
		background-image: radial-gradient(circle,
			rgba(254, 153, 0, 0.8),
			rgb(254, 153, 0));
		z-index: 10;
	}

	.club_data_c text {
		color: white;
		font-size: 36upx;
		font-weight: 600;
	}

	.club_data_l_a {
		width: 1%;
		height: 100%;
		background-color: rgb(254, 153, 0);
		position: absolute;
		left: 100%;
		top: 0;
	}

	.word {
		height: 60%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;
		
	}

	.mid {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.mid-button {
		width: 100%;
		display: flex;
		justify-content: center;
		position: relative;
	}

	.mid-button-left {
		width: 95%;
		height: 129rpx;
		background: linear-gradient(90deg, rgba(244, 230, 226, 0.6) 0%, rgba(244, 230, 226, 1) 100%);
		opacity: 0.5;
		line-height: 129rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(240, 107, 74, 1);
		text-align: center;
	}

	.mid-button-right {
		width: 95%;
		height: 129rpx;
		background: linear-gradient(90deg, rgba(231, 230, 246, 0.65) 0%, rgba(231, 230, 246, 1) 100%);
		opacity: 0.5;
		line-height: 129rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(133, 99, 220, 1);
		text-align: center;
	}

	.img {
		width: 49rpx;
		height: 49rpx;
		position: absolute;
		left: 20rpx;
		top: 40rpx;
	}

	.img1 {
		width: 88rpx;
		height: 88rpx;
	}

	.img2 {
		width: 49rpx;
		height: 49rpx;
	}
    .down{
		width:100%;
		background:rgba(255,255,255,1);
		opacity:1;
		border-radius:24rpx;
		padding: 20rpx 20rpx;
		margin-top: 40rpx;
	}
	.swiper-tab-list {
		color: #969696;
		font-weight: bold;
		box-sizing: border-box;
	}

	.uni-tab-bar .active {
		color:rgba(51,51,51,1);
	}
	.active .swiper-tab-line {
		border-bottom: 6rpx solid rgba(51,51,51,1);
		width: 70rpx;
		margin: auto;
		border-radius: 20rpx;
		position: absolute;
		left: 50%;
		transform: translate(-50%);
		bottom: -15rpx;
	}

	.uni-swiper-tab {
		border-bottom: 1upx solid #eeeeee;
	}

	.tap {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx;
		border-bottom: 8rpx solid rgba(238,238,238,1);
	}

	.swiper-item {
		padding: 20rpx 0;
	}

	.swiper-item1 {
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
	}

	.swiper-item-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.swiper-item-top-mid {
		display: flex;
		flex-direction: column;
		margin-left: 10rpx;
	}
    .swiper-item-top-mid text{
		 color:rgba(102,102,102,1);
	}
	.swiper-item-down {
		padding-top: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.swiper-item-down1 {
		/* padding-top: 30rpx; */
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.swiper-item-down-left {
		display: flex;
		justify-content: space-between;
	}

	.swiper-item-top-left {
		display: flex;
	}

	.swiper-item-down-right {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.down-word {
		margin-right: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color:rgba(153,153,153,1);
		opacity: 1;
	}

	.line {
		margin-top: 20rpx;
		width: 100%;
		height: 2rpx;
		background: rgba(238, 238, 238, 1);
		opacity: 1;
	}
	.money{
		padding-top: 20px;
	}
    .head,.bottom{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	 .text text:first-child{
		font-size:28rpx;
		font-weight: bold;
		font-family:PingFang SC;
		color:rgba(102,102,102,1);
	}
	.text text:last-child{
		margin-left: 20rpx;
		font-family:PingFang SC;
		color:rgba(51,51,51,1);
		font-weight: bold;
	}
	.head .button{
		width:137rpx;
		height:52rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bottom{
		margin-top: 20rpx;
	}
	.check{
		color: rgba(241, 178, 95, 1);
		border: 1px solid rgba(241, 178, 95, 1);
	}
	.reject{
		border:1px solid rgba(219,78,74,1);
		color:  rgba(219,78,74,1);
	}
    .refund{
		border:1px solid rgba(63,214,69,1);
		color: rgba(63,214,69,1);;
	}
	.back {
		
		
		opacity:1;
	}
	.backimg{
		width: 750rpx;
		height: 475rpx;
	}
	.backword{
		height: 30rpx;
		font-size:40rpx;
		font-family:PingFang SC;
		font-weight:500;
		line-height:30rpx;
		color:rgba(255,255,255,1);
		letter-spacing:18rpx;
		opacity:1;
		position: absolute;
		top: 220rpx;
		left: 50%;
		transform: translate(-50%);
	}
</style>
